<template>
    <div class="home">
        <h2>这是vue3</h2>
        <img alt="Vue logo" src="../assets/logo.png">
        <h3>基座传的obj的num值{{obj.num}}</h3>
        <h4>全局时间————————{{globalTime}}</h4>
        <div class="test-box t1"></div>
        <div class="test-box t2" :style="{backgroundImage:'url(' + require(`../assets/2.png`) + ')'}"></div>
        <div class="test-box t3"></div>
    </div>
</template>

<script lang="ts">
    import {reactive, toRefs, defineComponent} from 'vue'

    interface reactiveDataInterface {
        obj: { num: number },
        globalTime: string
    }

    export default defineComponent({
        name: '',
        setup() {
            window.microApp.addDataListener((data: any) => {
                console.log('来自父应用的数据', data)
                reactiveData.obj.num = data.user.num
            })
            window.microApp.addGlobalDataListener((data: any) => {
                console.log('vue3获取到的全局数据', data)
                reactiveData.globalTime = data.globalTime
            })
            const reactiveData = reactive<reactiveDataInterface>({
                obj: { num: 1 },
                globalTime: ''
            })
            return {
                ...toRefs(reactiveData)
            }
        }
    })
</script>


<style scoped lang="less">
    @import "home";
    .test-box{
        width: 100px;
        height: 100px;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .t1{
        background-image: url("../assets/1.png");
    }
</style>
